import { Space, Table, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import React, { useState } from 'react';
import { usePageInfo } from '@/hooks'
import { history } from 'umi'

type Props = {}
interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
}

const columns: ColumnsType<DataType> = [
    {
        title: '序号',
        dataIndex: 'name',
        key: 'name',
        render: (text, row, index) => <a>{ index + 1}</a>,
    },
    {
        title: '所属分类',
        dataIndex: 'cate',
        key: 'cate',
        render: (text, row, index) => {
            return <span>
                {
                    text.map((item: any, index: number) => {
                        return <span key = { item._id}>
                            { item.name } 
                            { index !== (text.length - 1)? '/': '' }
                        </span>
                    })
                }
            </span>
        }
    },
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '操作',
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <Button onClick={() => {
                    // console.log(record.key)
                    history.push({
                        pathname: '/article/edit',
                        state: {
                            id: record.key
                        }
                    })
                }} type="primary">编辑</Button>
                <Button type="primary" danger>删除</Button>
            </Space>
        ),
    },
];


export default function ArtTable({ }: Props) {
    const { list, changePage, total } = usePageInfo("/rest/articles")
    return (
        <div>
            <Table columns={columns} onChange = { changePage } pagination = {{
                total,
                defaultPageSize: 5,
                showQuickJumper: true,
                pageSizeOptions: ['5', '8', '10', '15']
            }}  dataSource={list} />
        </div>
    );
}